<template>
  <div>
    <div class="order-pay">
      <div class="hint">
        <p class="time">剩余支付时间：{{createTime}}</p>
        <p class="desc">购买后1小时将自动确认！请您在付款1小时内使用！</p>
      </div>
      <div class="button-bottom">
        <div class="item">
          <p>合计：<span class="red">¥{{info.amount}}</span></p>
        </div>
        <div class="item">
          <mt-button class="cancel" @click.native="cancelOrder">取消订单</mt-button>
          <mt-button class="confirm" @click="toPay">去支付</mt-button>
        </div>
      </div>
      <div class="block">
        <p>订单编号：{{info.order_no}}</p>
        <p>下单时间：{{info.create_time}}</p>
      </div>
      <div class="block">
        <p class="title">商品信息</p>
        <p>商品类别：{{info.name}}-{{info.suffix_name}}</p>
        <p>数量：{{info.num}}</p>
        <p>单价：¥{{info.sell_price}}</p>
        <p>总价：¥{{info.amount}}</p>
      </div>
      <div class="block">
        <p class="title">商品详情</p>
        <div v-html="info.detail"></div>
      </div>
      <div class="block">
        <p class="title">使用说明</p>
        <div ref="instruction" :class="{hide: !isHide}" v-html="info.use_instruction"></div>
        <div class="read-more" :class="{hide: isHide}" @click="showContent">
          <span>如您第一次购买，请阅读</span>
          <span class="link">使用细则</span>
          <img src="/src/assets/icons/arrow-down.png">
        </div>
      </div>
      <div class="block">
        <p class="title">适用门店</p>
        <div v-html="info.suitable_shop_info"></div>
      </div>
      <div class="radio-group">
        <div class="title">支付方式：</div>
        <div class="radio" v-for="v in radioOption" :key="v.id">
          <div class="label">
            <img :src="v.icon">
            <span>{{v.title}}</span>
          </div>
          <div class="value">
            <span>{{v.account}}</span>
            <img 
              :src="`/src/assets/icons/circle${choose === v.id ? '-success' : ''}.png`"
              @click="radioCheck(v.id)"
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {MessageBox, Toast} from 'Mint-ui'

  export default {
    name: 'Pay',
    data () {
      return {
        info: {},
        isHide: false,
        radioOption: [],
        choose: 0,
        createTime: '00:00:00'
      }
    },
    methods: {
      getInfo () {
        let params = {order_id: this.$route.params.id}
        this.$post('/vue/order/to_pay_order', params).then(data => {
          this.info = data.order
          this.choose = data.default
          this.radioOption = data.payment
          this.timeMinus()
        })
      },
      radioCheck (id) {
        this.choose = id
      },
      timeMinus () {
        let nowTimeStamp = new Date().getTime()
        let orderTime = 10 * 60 // 订单时间
        let intDiff = Math.floor(orderTime - (Number(nowTimeStamp) - Number(this.info.create_timestamp * 1000)) / 1000)
        if (intDiff <= 0) {
          return false
        }
        let settime = setInterval(() => {
          let hour = 0
          let minute = 0
          let second = 0
          if (intDiff <= 0) {
            clearInterval(settime)
          }
          hour = Math.floor(intDiff / (60 * 60))
          minute = Math.floor(intDiff / 60) - (hour * 60)
          second = Math.floor(intDiff) - (hour * 60 * 60) - (minute * 60)
          if (minute <= 9) minute = '0' + minute
          if (second <= 9) second = '0' + second
          this.createTime = hour + ':' + minute + ':' + second
          intDiff--
        }, 1000)
      },
      showContent () {
        this.isHide = true
      },
      cancelOrder () {
        MessageBox.confirm('确认取消订单？', '温馨提示').then(action => {
          if (action === 'confirm') {
            let params = {order_id: this.$route.params.id}
            this.$post('/vue/order/cancel_order', params).then(data => {
              msg('取消订单成功')
              this.$router.go(-1)
            })
          }
        })
      },
      toPay () {
        const payObj = {3: 'wechat', 6: 'alipay'}
        window.location.href = `/vue/pay/do_pay/?order_id=${this.$route.params.id}&payment=${payObj[this.choose]}`
      }
    },
    mounted () {
      this.getInfo()
    }
  }
  const msg = (msg) => {
    Toast({
      message: msg,
      position: 'bottom',
      duration: 2000
    })
  }
</script>

<style lang="less">
  @c-105: rgb(105, 105, 105);
  @c-124: rgb(124, 124, 124);
  @c-169: rgb(169, 169, 169);
  @c-226: rgb(226, 226, 226);
  @c-235: rgb(235, 235, 235);
  @c-red: rgb(255, 129, 98);
  @c-blue: rgb(108, 184, 222);
  @c-yellow: rgb(248, 231, 28);

  .order-pay {
    background-color: #FFF;
    height: calc(~'100vh - 57px');
    overflow-x: hidden;
    overflow-y: scroll;
    .hint {
      background-color: @c-yellow;
      p {
        font-size: 12px;
        line-height: 24px;
        color: @c-105;
        &.desc {
          font-weight: bold;
        }
      }
    }
    .block {
      padding: 12px 12px 0;
      font-size: 12px;
      line-height: 24px;
      color: @c-124;
      text-align: left;
      &::after {
        content: '';
        margin: 12px -12px 0;
        display: block;
        height: 8px;
        background-color: rgb(240, 244, 247);
      }
      .title　{
        font-size: 13px;
        font-weight: bold;
        margin-bottom: 12px;
      }
      .read-more {
        font-size: 12px;
        line-height: 24px;
        color: @c-124;
        text-align: center;
        span {
          vertical-align: middle;
        }
        .link {
          color: @c-blue;
          text-decoration: underline;
        }
        img {
          width: 24px;
          height: 24px;
          vertical-align: middle;
        }
      }
      .hide {
        display: none;
      }
    }
    .radio-group {
      padding: 12px;
      text-align: left;
      .title {
        font-size: 13px;
        font-weight: bold;
        line-height: 24px;
        color: @c-124;
      }
      .radio {
        padding: 12px 0;
        border-bottom: 1px solid @c-235;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        &:last-child {
          padding-bottom: 4px;
          border: 0;
        }
        .label {
          flex: 0 0 auto;
          img {
            margin-right: 12px;
          }
        }
        .value {
          flex: 0 0 auto;
          text-align: right;
          span {
            margin-right: 8px;
          }
        }
        img {
          width: 24px;
          height: 24px;
          vertical-align: middle;
        }
        span {
          font-size: 12px;
          line-height: 24px;
          color: @c-124;
          vertical-align: middle;
        }
      }
    }
    .button-bottom {
      padding: 8px 12px;
      border-top: 1px solid @c-226;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #FFF;
      display: flex;
      justify-content: space-between;
      .item {
        flex: 1;
        display: flex;
        align-items: center;
        align-content: center;
        justify-content: space-between;
        p {
          font-size: 12px;
          line-height: 24px;
          color: @c-124;
          padding: 5px 0;
          .red {
            color: @c-red;
            font-size: 16px;
          }
        }
      } 
    }
    .mint-button {
      height: 40px;
      padding: 7px 0;
      text-align: center;
      background-color: @c-blue;
      border-radius: 20px;
      line-height: 0;
      .mint-button-icon {
        line-height: 0;
      }
      .mint-button-text {
        font-size: 13px;
        line-height: 24px;
        display: inline-block;
        vertical-align: middle;
      }
      &.cancel {
        width: 84px;
        border: 0;
        box-shadow: none;
        background-color: transparent;
        color: @c-169;
        &::after {
          display: none;
        }
      }
      &.confirm {
        width: 120px;
        color: #FFF;
        background-color: @c-blue;
        box-sizing: border-box;
      }
    }
  }
</style>